<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="index.css" />
    <meta charset="UTF-8" />
    <meta />
  </head>

  <body>
    <nav class="z-depth-0" id="nav-area">
      <div class="nav-drag-region" id="drag-area"></div>
      <div class="nav-wrapper">
        <i class="material-icons left" id="logo">vpn_key</i>

        <ul class="right">
          <li class="head-li">
            <a title="最小化" id="min-btn" class="btn-floating tiny-btn"></a>
          </li>
          <li class="head-li">
            <a
              title="最大化"
              id="max-btn"
              class="btn-floating tiny-btn white"
            ></a>
          </li>
          <li class="head-li">
            <a
              title="关闭"
              id="close-btn"
              class="btn-floating tiny-btn red"
            ></a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="chrome-tabs" id="tabs-area">
      <div class="chrome-tabs-content"></div>
      <!-- <div class="chrome-tabs-bottom-bar"></div> -->
    </div>

    <div id="tab-add-btn">✚</div>

    <div id="editor-area"></div>

    <div id="menu-area" hidden>
      <div class="row">
        <div class="col s12" id="menu-tabs-row">
          <ul class="tabs" id="menu-tabs">
            <li class="tab col s2">
              <a class="active" href="#general-tab">general</a>
            </li>
            <li class="tab col s2"><a href="#transmit-tab">transmit</a></li>
            <li class="tab col s2"><a href="#advance-tab">advance</a></li>
            <li class="tab col s2"><a href="#fileops-tab">file ops</a></li>
            <li class="tab col s2"><a href="#chart-tab">chart</a></li>
            <li class="tab col s2"><a href="#about-tab">about</a></li>
          </ul>
        </div>
        <div id="general-tab-placeholder"></div>
        <div id="transmit-tab-placeholder"></div>
        <div id="advance-tab-placeholder"></div>
        <div id="fileops-tab-placeholder"></div>
        <div id="chart-tab-placeholder"></div>
        <div id="about-tab-placeholder"></div>
        <script>
          // Synchronously load all tab HTML fragments into their placeholders
          const tabFragments = [
            { id: 'general-tab-placeholder', file: 'tabs/general-tab.html' },
            { id: 'transmit-tab-placeholder', file: 'tabs/transmit-tab.html' },
            { id: 'advance-tab-placeholder', file: 'tabs/advance-tab.html' },
            { id: 'fileops-tab-placeholder', file: 'tabs/fileops-tab.html' },
            { id: 'chart-tab-placeholder', file: 'tabs/chart-tab.html' },
            { id: 'about-tab-placeholder', file: 'tabs/about-tab.html' },
          ]
          tabFragments.forEach(function (tab) {
            var xhr = new XMLHttpRequest()
            xhr.open('GET', tab.file, false)
            xhr.send(null)
            if (xhr.status === 200) {
              var el = document.getElementById(tab.id)
              if (el) el.outerHTML = xhr.responseText
            }
          })
        </script>
      </div>
    </div>

    <div id="bar-area-placeholder"></div>
    <script>
      // Synchronously load the bar-area.html fragment into the placeholder
      ;(function () {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', 'bar-area.html', false)
        xhr.send(null)
        if (xhr.status === 200) {
          var el = document.getElementById('bar-area-placeholder')
          if (el) el.outerHTML = xhr.responseText
        }
      })()
    </script>

    <!-- You can also require other files to run in this process -->
    <script src="index.js"></script>
  </body>
</html>
